<template>
  <div class="info">
    <div class="title">
      <svg
        @click="$router.push('/')"
        t="1671798247143"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2281"
        width="200"
        height="200"
      >
        <path
          d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
          p-id="2282"
        ></path>
        <path
          d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
          p-id="2283"
        ></path>
      </svg>
      <span>个人信息</span>
      <span></span>
    </div>
    <div class="content" v-if="info">
      <div class="avatar">
        <span>修改会员头像</span>
        <div class="right">
          <img :src="info?.memberAvatar" alt="" />
          <span>&gt;</span>
        </div>
      </div>
      <div class="username">
        <span>会员名</span>
        <span>{{ info.memberName }}</span>
      </div>
      <ul class="info-list">
        <li>
          <span>昵称</span>
          <div class="right">
            <span>{{ info.memberNickName }}</span>
            <span @click="$router.push('/nickname')">&gt;</span>
          </div>
        </li>
        <li>
          <span>性别</span>
          <div class="right">
            <span>{{ info.genderValue }}</span>
            <span @click="chooseGender">&gt;</span>
            <van-picker
              class="birthday"
              v-if="showpicker"
              title="性别"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
            />
          </div>
        </li>
        <li>
          <span>生日</span>
          <div class="right">
            <span>{{ info.memberBirthday }}</span>
            <span @click="show = true">&gt;</span>
            <van-datetime-picker
              v-if="show"
              class="birthday"
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="sureTime"
              @cancel="cancelTime"
            />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import Vue from "vue";
import { DatetimePicker } from "vant";
import { Picker } from "vant";

Vue.use(Picker);
Vue.use(DatetimePicker);
export default {
  data() {
    return {
      token: null,
      info: null,
      show: false,
      showpicker: false,

      //生日
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDay()
      ),

      //性别
      columns: ["保密", "男", "女"],
    };
  },
  methods: {
    async onConfirm(value, index) {
      value;

      await this.axios({
        url: "https://m-mall.gxptkc.com/v3/member/front/member/updateInfo",
        method: "POST",
        headers: {
          authorization: `Bearer ${this.token}`,
        },
        data: qs.stringify({
          gender: index,
        }),
      });

      let infoRes = await this.axios({
        method: "GET",
        url: "https://m-mall.gxptkc.com/v3/member/front/member/memberInfo",
        headers: {
          authorization: `Bearer ${this.token}`,
        },
      });
      this.info = infoRes.data.data;
      this.showpicker = false;
    },
    onCancel() {
      this.showpicker = false;
    },
    chooseGender() {
      this.showpicker = true;
    },
    async sureTime() {
      this.show = false;
      let d = qs
        .stringify({
          memberBirthday: this.currentDate,
        })
        .slice(15, 25);

      await this.axios({
        url: "https://m-mall.gxptkc.com/v3/member/front/member/updateInfo",
        method: "POST",
        headers: {
          authorization: `Bearer ${this.token}`,
        },
        data: qs.stringify({
          memberBirthday: d,
        }),
      });

      let infoRes = await this.axios({
        method: "GET",
        url: "https://m-mall.gxptkc.com/v3/member/front/member/memberInfo",
        headers: {
          authorization: `Bearer ${this.token}`,
        },
      });
      this.info = infoRes.data.data;
    },
    cancelTime() {
      this.show = false;
    },
  },

  async created() {
    this.token = localStorage.getItem("fastCar-token");
    if (this.token) {
      let infoRes = await this.axios({
        method: "GET",
        url: "https://m-mall.gxptkc.com/v3/member/front/member/memberInfo",
        headers: {
          authorization: `Bearer ${this.token}`,
        },
      });
      this.info = infoRes.data.data;
    }
  },
};
</script>

<style lang="scss" scoped>
.birthday {
  width: 100vw;
  height: 40vh;
  position: absolute;
  bottom: 0;
  left: 0;
}
.info {
  position: relative;
  height: 100vh;
  background-color: rgb(245, 245, 245);
  .title {
    display: flex;
    justify-content: space-between;
    padding: 10rem;
    background-color: #fff;
    margin-bottom: 10rem;
    svg {
      width: 25rem;
      height: 25rem;
    }
    span {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
    }
  }
  .content {
    .avatar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 10rem;
      span {
        font-size: 14rem;
        color: #2d2d2d;
      }
      .right {
        display: flex;
        align-items: center;
        img {
          width: 41rem;
          height: 41rem;
          margin-right: 5rem;
        }
        span {
          color: #999;
          font-size: 16rem;
        }
      }
    }
  }
  .username {
    margin: 10rem 0;
    padding: 13rem 10rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 14rem;
      color: #2d2d2d;
      &:last-child {
        font-size: 13rem;
        color: #949494;
      }
    }
  }
  ul.info-list {
    background-color: #fff;
    padding: 0 10rem;
    li {
      display: flex;
      justify-content: space-between;
      padding: 14rem 0;
      border-bottom: 1px solid #eee;
      span {
        font-size: 14rem;
        color: #2d2d2d;
      }
      .right {
        span {
          font-size: 13rem;
          color: #949494;
          margin-left: 5rem;
        }
      }
    }
  }
}
</style>